<template name="sd-float-page">
	<view>
		<view class="top-do-box">
			<view class="room-info">
				<view class="room-logo-box" v-if="room.logo">
					<image :src="room.logo"></image>
				</view>
				<view class="room-info-message">
					<view class="room-user-name web-font" v-if="room.username">
						{{room.username}}
					</view>
					<view class="room-user-money">
						<view class="room-xin-box">
							★星光
						</view>
						<view class="room-money">4000</view>
					</view>
				</view>
				<view class="room-guanzhu">关注</view>
			</view>
			<view class="room-users-box">
				<scroll-view class="right_top_scroll" scroll-x="true" scroll-left="0">
					<view v-if="users.length>0" class="top-scroll-users-header" v-for="(bitem,bindex) in users" :key="bindex">
						<image :src="bitem.userAvatar"></image>
					</view>
				</scroll-view>
			</view>
			<view class="users-count web-font">
				{{users.length}}
			</view>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" class="message-scroll" :scroll-into-view="view_id">
			<view class="message-scroll-li" v-for="(litem,lindex) in message_arr" :key="lindex">
				<template v-if="litem.nature==1">
					
				</template>
				<template v-if="litem.nature==2">
					<view class="message-scroll-li-box">
						<view class="user-lever">
							<view class="user-lever-ico-box">
								<image class="user-lever-ico" src="/static/img/room-user-lever.png"></image>
							</view>
							<view class="web-font user-lever-text">2</view>
						</view>
						<text class="nickname web-font" v-if="litem.userName">{{litem.userName}}:</text>
						<text class="message-scroll-box web-font">
							{{litem.message}}
						</text>
					</view>
				</template>
				<template v-if="litem.nature==3">
					<view class="message-scroll-li-box">
						<text class="message-scroll-box-xi web-font">
							{{litem.message}}
						</text>
					</view>
				</template>
			</view>
			<view :id="view_id" style="height: 60upx;"></view>
		</scroll-view>
		<!-- 底部操作 -->
		<view class="inpit-box-bg" v-if="focus && role=='audience'">
			<view class="inpit-box-body">
				<input class="uni-input" @input="onKeyInput" maxlength="20" cursor-spacing="10" hold-keyboard placeholder="说点什么吧..." :value="inputValue" :focus="focus"/>
				<view class="send-but" v-if="inputValue!=''" @click="send_message">发送</view>
			</view>
		</view>
		<view class="dobox" v-if="role=='audience'">
			<view class="inpit-box">
				<view v-if="!focus" class="input-tpl" @click="set_focus">说点什么..</view>
				<view class="functionbox">
					<view class="function-box">
						<view class="ico-box" @click="send_lick">
							<!-- <icon class="mico m-add ico"></icon> -->
							<view style="width: 60upx;height: 60upx;margin: auto;margin-top: 10upx;">
								<image src="../../static/lw/1.gif" style="width: 100%;height: 100%;"></image>
							</view>
						</view>
						<view class="ico-box" @click="send_liwu">
							<icon class="mico m-liwu ico"></icon>
						</view>
						
						<view class="ico-box" @click="outroom">
							<icon class="mico m-close ico"></icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<template v-if="popup==1">
				<view class="uni-share" style="background-color: #421395;">
					<!-- <text class="uni-share-title">支付选项</text> -->
					<view class="send-boj" id="tes">
						<view style="font-size: 32upx;padding-left: 10upx;color: #FFFFFF;">
							礼物
						</view>
					</view>
					<swiper disable-touch="true" catchtouchmove="stopTouchMove" style="height: 480upx;"
					duration="500" indicator-dots>
						<swiper-item>
							<view class="uni-share-content">
								<view class="lw-box" v-for="(litem,lindex) in liwu" :key="lindex" @click="send_liwu_obj(1,litem.id)">
									<image class="lw-ico" :src="litem.ico"></image>
									<view class="lw-name">{{litem.name}}</view>
									<view class="lw-money">{{litem.price}}陌陌币</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="uni-share-content">
								<view class="lw-box" v-for="(litem,lindex) in liwu2" :key="lindex" @click="send_liwu_obj(2,litem.id)">
									<image class="lw-ico" :src="litem.ico"></image>
									<view class="lw-name">{{litem.name}}</view>
									<view class="lw-money">{{litem.price}}陌陌币</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="uni-share-content">
								<view class="lw-box" v-for="(litem,lindex) in liwu3" :key="lindex" @click="send_liwu_obj(3,litem.id)">
									<image class="lw-ico" :src="litem.ico"></image>
									<view class="lw-name">{{litem.name}}</view>
									<view class="lw-money">{{litem.price}}陌陌币</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="gift-botton-view">
						<view style="color: #FFFFFF;" class="web-font">
							余额: {{user.rice}} 币
						</view>
						<view style="color: #ff2d54;">充值</view>
					</view>
				</view>
			</template>
			<template v-if="popup==2">
				<view class="uni-share">
					<text class="uni-share-title">设置</text>
					<view class="uni-share-content">
					</view>
					<text class="uni-share-btn" @click="cancel('share')">关闭</text>
				</view>
			</template>
		</uni-popup>
		<!-- 礼物弹窗 -->
		<view class="gift-alert" v-for="(gift,gindex) in giftobj" :key="gindex" v-bind:style="{bottom:300+gindex*10+'px'}" 
		:animation="gift.animationData">
			<view class="send-boj-user-header">
				<image :src="gift.userAvatar" style="width: 100%;height: 100%;"></image>
			</view>
			<view style="font-size: 32upx;padding-left: 10upx;color: #FFFFFF;">
				送你{{gift.gift_name}}
			</view>
			<view class="gift-ico">
				<image :src="gift.gift_ico" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<!-- 用户进入弹窗 -->
		<view class="join-box" v-for="(join,jindex) in join_arr" :key="jindex"
		:animation="join.animationData"
		>
			<view class="user-lever" style="margin-right: 10upx;">
				<view class="user-lever-ico-box">
					<image class="user-lever-ico" src="/static/img/room-user-lever.png"></image>
				</view>
				<view class="web-font user-lever-text">2</view>
			</view>
			<text class="join-box-text web-font">
				{{join.message}}
			</text>
		</view>
	</view>
</template>

<script>
	var liveroom = require('../../static/js/mlvbliveroomcore.js');
	import uniPopup from '@/components/uni-popup/live-uni-popup.vue';
	import Json from '../../static/js/json.js' //测试用数据
	export default {
		name: "sd-float-page",
		props: {
			role_val:{
				type: String,
				default: '0'
			},
			roomid_val:{
				type: String,
				default: '0'
			},
		},
		components: {
			uniPopup
		},
		data() {
			return {
				room:[],//房间信息
				users:[],
				rid:0,//房间id
				role:'',//角色
				focus:false,
				inputValue:'',
				message_arr:[],
				view_id:'',
				liwu:Json.liwu,
				liwu2:Json.liwu2,
				liwu3:Json.liwu3,
				type:'',
				popup:1,//1礼物操作 2其他操作
				user:'',
				giftobj:[],//礼物
				join_arr:[]
			}
			/*定义IM消息类型
			1：进群通知
			2：发送自定义消息
			3：收到礼物
			*/
		},
		onReady() {
			const t = this;
			t.role = this.$props.role_val;
			t.rid = this.$props.roomid_val;
			t.user = uni.getStorageSync('user');
			console.log('浮动模板被加载的事件')
			console.log(this.$props)
			// 保持屏幕常亮
			uni.setKeepScreenOn({
			    keepScreenOn: true,
				success: (res) => {
					console.log('手机长亮时间')
					 console.log(res)
				},
				fail:(e) => {
					console.log(e)
					console.log('手机长亮时间')
				}
			});
			uni.onKeyboardHeightChange(res => {
				if(res.height==0){
					this.focus = false;
				}
			})
			
			/*uni.onSocketClose(function (res) {
				console.log('监听到WebSocket意外关闭！');
				console.log(res)
				var userid = uni.getStorageSync('userid');
				t.$api.websocket(userid);
			});*/
			//添加系统提示
			//t.notice.push('hello,欢迎欢迎！本平台是绿色健康直播，严禁直播或评论出现违法违规、低俗色情、吸烟酗酒等内容，若有违反，我们将有权对主播或者观众进行封号处理。');
			//监听直播间消息
			/*uni.onSocketMessage(function (res) {
				console.log('有用户发消息：');
				var message = JSON.parse(res.data);
				console.log(message)
				//t.websocket_get_room_message();
				//此处使用长连接自动加载消息，若不使用长连接，请自行设置其他函数监听消息
				if(message.typ==1){
					t.message_arr.push(message);
					t.view_id = 'demo'+t.message_arr.length;
				}else if(message.typ==2){
					var nowTime = new Date();
					var animation = uni.createAnimation({
						duration:200,
						timingFunction:'linear'
					});
					//animation.left(20).step();
					animation.left(20).step({ duration: 200 });
					message.animationData = animation;
					message.tapTime = nowTime;//加入计时器
					t.giftobj.push(message);
					console.log(t.giftobj)
					var animation_del = uni.createAnimation({
						duration:200,
						timingFunction:'linear'
					});
					animation_del.left(-300).step({ duration: 200 });
					setTimeout(function(){
						for(var i = 0; i < t.giftobj.length; i++){
							if (new Date() - t.giftobj[i].tapTime > 3000) {
								t.giftobj[i].animationData = animation_del;
							}
						}
					},3000)
				}else if(message.typ==3){
					console.log('用户',message)
					if(message.nature=='join'){
						var index = t.users.findIndex(i=>i.userid==message.userid);
						if(index==-1){
							t.users.push(message);
						}
					}else{
						var index = t.users.findIndex(i=>i.userid==message.userid);
						if(index>-1){
							t.users.splice(index,1);
						}
					}
				}else{
					console.log('未知动态')
				}
			});*/
			t.get_live_room();//调用直播间信息
			uni.$on('onRoomEvent',(e)=>{
				t.onRoomFunc(e);
			})
			
		},
		methods:{
			onRoomFunc:function(e){
				const t = this;
				var self = this;
				var args = e.detail;
				switch (args.tag) {
					case 'recvTextMsg': {
						console.log('收到用户发送消息:', e.detail.detail);
						if(e.detail.detail.nature==1){
							var index = t.users.findIndex(i=>i.userid==e.detail.detail.userid);
							if(index==-1){
								t.users.push(e.detail.detail);
							}
							var str = e.detail.detail;
							str.tapTime = new Date();
							str.message = e.detail.detail.userName + " "+" 进入房间";
							var animation = uni.createAnimation({
								duration:200,
								timingFunction:'linear'
							});
							animation.left(20).step({ duration: 200 });
							str.animationData = animation;
							t.join_arr.push(str);
							console.log('t.join_arr',t.join_arr)
							var animation_del = uni.createAnimation({
								duration:200,
								timingFunction:'linear'
							});
							animation_del.left(-300).step({ duration: 200 });
							setTimeout(function(){
								for(var i = 0; i < t.join_arr.length; i++){
									if (new Date() - t.join_arr[i].tapTime > 3000) {
										t.join_arr[i].animationData = animation_del;
										// if (new Date() - t.join_arr[i].tapTime > 5000){
										// 	t.join_arr.splice(i,1);//释放内存
										// }
									}
								}
								console.log('t.join_arr',t.join_arr)
								console.log('t.users',t.users)
							},3000)
						}else if(e.detail.detail.nature==2){
							t.message_arr.push(e.detail.detail);
						}else if(e.detail.detail.nature==3){
							var message = e.detail.detail;
							var nowTime = new Date();
							var animation = uni.createAnimation({
								duration:200,
								timingFunction:'linear'
							});
							animation.left(20).step({ duration: 200 });
							message.animationData = animation;
							message.tapTime = nowTime;//加入计时器
							t.giftobj.push(message);
							console.log('t.giftobj',t.giftobj)
							var animation_del = uni.createAnimation({
								duration:200,
								timingFunction:'linear'
							});
							animation_del.left(-300).step({ duration: 200 });
							setTimeout(function(){
								for(var i = 0; i < t.giftobj.length; i++){
									if (new Date() - t.giftobj[i].tapTime > 3000) {
										t.giftobj[i].animationData = animation_del;
										// if (new Date() - t.giftobj[i].tapTime > 5000){
										// 	t.giftobj.splice(i,1);//释放内存
										// }
									}
								}
								console.log('t.giftobj',t.giftobj)
							},3000)
							message.message = message.userName+ '送了'+message.number+'个'+message.gift_name;
							t.message_arr.push(message);
						}else if(e.detail.detail.nature==4){
							e.detail.detail.message = e.detail.detail.userName+'关注了主播';
							t.message_arr.push(e.detail.detail);
						}else{
							return;
						}
						console.log('t.message_arr',t.message_arr)
						t.view_id = 'demo'+t.message_arr.length;
						break;
					}
					default: {
						console.log('onRoomEvent default: ', e)
						break;
					}
				}
			},
			outroom:function(){
				const t = this;
				var userinfo = liveroom.getAccountInfo();
				var userID = userinfo.userID;
				liveroom.exitRoom({
					roomID:t.rid,
					userID:userID
				});
				t.func.jump(4)
			},
			get_live_room:function(){
				const t = this;
				var userid = uni.getStorageSync('userid');
				if(t.role=='anchor'){
					var role = 1;
				}else{
					var role = 0;
				}
				uni.request({//返回系统数据
					url:t.func.api.get_live_room,
					data:{ 
						rid:t.rid,
						userid:userid,
						role:role
					},
					method:"POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success:(res)=>{
						console.log('模板获取直播间',res)
						if(res.data.data.msg==1){
							t.room = res.data.data.room;
						}else{
							t.func.jump(4)
						}
					}	
				})
			},
			togglePopup(type, open) {
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			send_liwu:function(){
				const t = this;
				t.popup = 1;
				t.togglePopup('bottom', 'share');
			},
			send_lick:function(){
				const t = this;
				var user = uni.getStorageSync('user');
				var userid = uni.getStorageSync('userid');
				var send_data = {
					userid:userid,
					rid:t.rid,
					typ:2,
					nature:3,
					nickname:user.nickname,
					avatarurl:user.avatarurl,
					number:1
				}
				var obj = Json.liwu;
				var index = obj.findIndex(i=>i.id==1);
				var liwu = obj[index];
				send_data.gid = liwu.id;//追加图片地址
				send_data.price = liwu.price;
				send_data.gift_name = liwu.name;
				send_data.gift_ico = liwu.ico;
				uni.showModal({
				    title: '提示',
				    content: '确定发送1个小可爱？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							if(user.rice>=liwu.price){
								uni.request({//返回系统数据
									url:t.func.api.user_send_room_liwu_pay,
									data:{ 
										send_data:JSON.stringify(send_data)
									},
									method:"POST",
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									success:(res)=>{
										console.log('res',res)
										if(res.data.data.msg==1){
											uni.setStorageSync('user',res.data.data.user);
											t.user = res.data.data.user;
											t.cancel('share');
											send_data.message = '发送礼物';
											send_data.msg =  '礼物';
											liveroom.sendRoomTextMsg({
												data:send_data,
												success: ()=>{
													console.log('发送礼物成功')
												}
											});
										}
									}	
								})
							}else{
								console.log('约不足')
							}
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			
			send_liwu_obj:function(e,d){
				const t = this;
				var user = uni.getStorageSync('user');
				var userid = uni.getStorageSync('userid');
				var send_data = {
					userid:userid,
					rid:t.rid,
					typ:2,
					nature:3,
					nickname:user.nickname,
					avatarurl:user.avatarurl,
					number:1
				}
				if(e==1){
					var obj = Json.liwu;
				}else if(e==2){
					var obj = Json.liwu2;
				}else{
					var obj = Json.liwu3;
				}
				var index = obj.findIndex(i=>i.id==d);
				var liwu = obj[index];
				send_data.gid = liwu.id;//追加图片地址
				send_data.price = liwu.price;
				send_data.gift_name = liwu.name;
				send_data.gift_ico = liwu.ico;
				console.log(send_data)
				// console.log(e)
				// console.log(d)
				// console.log(liwu)
				uni.showModal({
				    title: '支付提示',
				    content: '本次消费你需要支付'+liwu.price+'陌陌币确认支付吗？',
				    success: function (res) {
				        if (res.confirm) {
							if(user.rice>=liwu.price){
								uni.request({//返回系统数据
									url:t.func.api.user_send_room_liwu_pay,
									data:{ 
										send_data:JSON.stringify(send_data)
									},
									method:"POST",
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									success:(res)=>{
										console.log(res)
										if(res.data.data.msg==1){
											uni.setStorageSync('user',res.data.data.user);
											t.user = res.data.data.user;
											t.cancel('share');
											send_data.message = '发送礼物';
											send_data.msg =  '礼物';
											liveroom.sendRoomTextMsg({
												data:send_data,
												success: ()=>{
													console.log('发送礼物成功')
												}
											});
										}
									}	
								})
								console.log(send_data)
							}else{
								console.log('约不足')
							}
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			set_focus:function(){
				const t = this;
				t.focus = true;
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			send_message:function(){
				const t = this;
				t.focus = false;
				var user = uni.getStorageSync('user');
				var userid = uni.getStorageSync('userid');
				if(t.to_userid==''){
					uni.showToast({
					    title: '内容不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				console.log(t.inputValue)
				var send_data = {
					userid:userid,
					rid:t.rid,
					message:t.inputValue,
					msg: t.inputValue,
					typ:1,
					nature:2,//发消息
					nickname:user.nickname,
					avatarurl:user.avatarurl
				}
				console.log('发送的数据',send_data)
				liveroom.sendRoomTextMsg({
					data:send_data,
					success: ()=>{
						console.log('发送消息成功11111111')
						t.inputValue = '';
					},
					fail: (e) => {
						console.log("发送消息失败: ", e)
						uni.$emit('onRoomEvent', {
							detail:{
								tag: 'error',
								code: -9005,
								detail: `发送消息失败`
							}
						})
					}
				});
				// uni.request({//返回系统数据
				// 	url:t.func.api.send_room_message,
				// 	data:{
				// 		send_data:JSON.stringify(send_data)
				// 	},
				// 	method:"POST",
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded'
				// 	},
				// 	success:(res)=>{
				// 		console.log(res)
				// 		if(res.data.data.msg==1){
				// 			//t.message_arr.push(res.data.data.message);
				// 			//console.log(t.message_arr)
				// 			// t.view_id = 'demo'+t.message_arr.length;
				// 		}
				// 		t.inputValue = '';
				// 	}	
				// })
			},
		},
		onBackPress() {
			this.$refs['showpopup'].close()
			this.$refs['showtip'].close()
			this.$refs['showimage'].close()
			this.$refs['showshare'].close()
		}
	}
</script>

<style>
	page{
		position: relative;
	}
	.dobox{
		position: fixed;
		bottom: 0;
		width: 100%;
		/* background-color: #F8F8F8; */
	}
	.inpit-box{
		padding: 20upx 0;
		width: 90%;
		margin: auto;
		display: flex;
		/* padding-top: 40upx; */
	}
	.inpit-box-bg{
		background-color: #F2F2F2;
		padding: 5upx 10upx;
		overflow: hidden;
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 9999;
	}
	.inpit-box-body{
		display: flex;
		flex-wrap: nowrap;
		padding: 10upx 40upx 10upx 0;
	}
	.uni-input{
		font-size: 32upx;
		color: #333333;
		background-color: #F2F2F2;
		flex: 1;
	}
	.send-but{
		width: 120upx;
		background-color: #0081FF;
		color: #FFFFFF;
		text-align: center;
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		margin-top: 10upx;
	}
	.functionbox{
		flex: 1;
	}
	.function-box{
		display: flex;
		justify-content: space-around;
		padding-left: 20upx;
	}
	.ico-box{
		padding: 10upx;
		width: 70upx;
		height: 70upx;
		border-radius: 70upx;
		background-color: rgba(0,0,0,.1);
		line-height: 70upx;
		text-align: center;
	}
	.ico{
		color: #FFFFFF;
		font-size: 48upx;
	}
	.input-tpl{
		height: 70upx;
		width: 300upx;
		line-height: 70upx;
		background-color: rgba(0,0,0,.1);
		font-size: 32upx;
		color: #FFFFFF;
		padding: 10upx 20upx;
		border-radius: 70upx;
	}
	/* 消息滚动 */
	.message-scroll{
		position: fixed;
		bottom: 200upx;
		left: 20upx;
		width: 65%;
		height: 300upx;
	}
	.message-scroll-li{
		margin-bottom: 10upx;
		clear: both;
		overflow: hidden;
	}
	.message-scroll-li-box{
		/* display: flex; */
		background-color: rgba(0,0,0,.2);
		padding: 10upx 20upx;
		border-radius: 30upx;
		float: left;
		line-height: 40upx;
	}
	
	.nickname{
		font-size: 28upx;
		color: #22c8ef;
		/* font-weight: 800; */
		padding: 0 10upx;
		line-height: 40upx;
		padding-left: 4upx;
		font-weight: 800;
	}
	.message-scroll-box{
		line-height: 40upx;
		color: #f9f9f9;
		font-size: 28upx;
		white-space: pre-wrap;
		font-weight: 800;
	}
	.message-scroll-box-xi{
		line-height: 40upx;
		color: #f9f9f9;
		font-size: 28upx;
		white-space: pre-wrap;
	}
	.message-scroll-box-gift{
		color: #22c8ef;
		line-height: 40upx;
		font-size: 28upx;
		white-space: pre-wrap;
	}
	.user-lever{
		background-color: #ebc602;
		padding: 4upx 10upx;
		border-radius: 20upx;
		height: 20upx;
		line-height: 20upx;
		float: left;
		display: flex;
		overflow: hidden;
		margin-top: 10upx;
	}
	.user-lever-ico-box{
		width: 15upx;
		height: 15upx;
		border-radius: 100%;
		background-color: #e0ad07;
		padding: 2upx;
		margin-right: 5upx;
	}
	.user-lever-ico{
		width: 15upx;
		height: 15upx;
		display: block;
		margin: auto;
	}
	.user-lever-text{
		color: #FFFFFF;
		font-size: 22upx;
		height: 20upx;
		line-height: 20upx;
	}
	/* 底部分享 */
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
	}
	
	.uni-share-title {
		line-height: 60rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		text-align: center;
	}
	
	.uni-share-content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 15px;
		/* padding-bottom: 0; */
	}
	.content-image {
		width: 60rpx;
		height: 60rpx;
	}
	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}
	.gift-botton-view{
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #5c1398;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		display: flex;
		justify-content: space-between;
		padding: 20upx 40upx;
	}
	/* 礼物 */
	.lw-box{
		width: 25%;
		margin-bottom: 30upx;
	}
	.lw-ico{
		display: block;
		width: 100upx;
		height: 100upx;
		margin: auto;
	}
	.lw-name{
		font-size: 28upx;
		text-align: center;
		line-height: 32upx;
		padding-top: 8upx;
		color: #FFFFFF;
	}
	.lw-money{
		font-size: 24upx;
		color: #8a68c4;
		text-align: center;
	}
	.send-boj{
		display: flex;
		padding: 20upx 30upx;
		border-bottom: 2upx solid #5c1398;
	}
	.gift-alert{
		width: 400upx;
		position: fixed;
		/* height: 70upx; */
		line-height: 70upx;
		background-color: rgba(0,0,0,.5);
		border-radius: 70upx;
		bottom: 400upx;
		left: -500upx;
		display: flex;
		padding: 10upx;
		z-index: 9998;
	}
	.join-box{
		position: fixed;
		left: -500upx;
		bottom: 350upx;
		border-radius: 70upx;
		display: flex;
		padding: 10upx 30upx;
		z-index: 9999;
		background-color: #ef7526;
	}
	.join-box-text{
		color: #F9F9F9;
		line-height: 40upx;
		font-size: 32upx;
		white-space: pre-wrap;
	}
	.gift-ico{
		width: 100upx;
		height: 100upx;
		position: absolute;
		right: 20upx;
		top: -20upx;
	}
	.send-boj-user-header{
		width: 60upx;
		height: 60upx;
		border-radius: 100%;
		overflow: hidden;
		box-sizing: border-box;
		border: 4upx solid #00c9ff;
	}
	.send-boj-user-header image{
		width: 100%;
		height: 200upx;
	}
	.top-do-box{
		display: flex;
		width: 95%;
		margin: auto;
		/* #ifdef MP-WEIXIN */
		margin-top: 150upx;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: 60upx;
		/* #endif */
	}
	.room-info{
		width: 40%;
		display: flex;
		height: 80upx;
		background-color: rgba(0,0,0,.2);
		padding: 4upx 0;
		border-radius: 90upx;
		position: relative;
		overflow: hidden;
	}
	.room-logo-box{
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
		overflow: hidden;
		margin-right: 10upx;
	}
	.room-logo-box image{
		width: 100%;
		height: 100%;
	}
	.room-info-message{
		width: 50%;
	}
	.room-user-name{
		line-height: 30upx;
		white-space: nowrap;
		overflow: hidden;
		font-size: 28upx;
		color: #FFFFFF;
		padding-top: 6upx;
	}
	.room-user-money{
		display: flex;
	}
	.room-xin-box{
		height: 30upx;
		line-height: 30upx;
		font-size: 20upx;
		color: #FFFFFF;
		border-radius: 30upx;
		background-color: #f4305e;
		margin-top: 10upx;
		padding: 0 10upx;
		margin-right: 4upx;
	}
	.room-money{
		height: 30upx;
		line-height: 30upx;
		font-size: 20upx;
		color: #FFFFFF;
		border-radius: 30upx;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 10upx;
	}
	.room-guanzhu{
		width: 65upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		color: #f4305e;
		background-color: #FFFFFF;
		border-radius: 50upx;
		position: absolute;
		right: 6upx;
		top: 15upx;
		font-size: 24upx;
	}
	.room-users-box{
		width: 50%;
		height: 80upx;
		padding: 0 2upx;
	}
	.right_top_scroll{
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	.top-scroll-users-header{
		display: inline-block;
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
		margin-right: 10upx;
		overflow: hidden;
	}
	.top-scroll-users-header image{
		width: 100%;
		height: 100%;
	}
	.users-count{
		width: 70upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		border-radius: 60upx;
		background-color: rgba(0,0,0,.2);
		color: #FFFFFF;
		font-size: 28upx;
	}
</style>
